<template>
    <footer class="footer" v-if="todos.length">
    <input type="checkbox" :checked="alldone" @change="toggleAll" />
    <div>已办事项{{donecount}}/全部事项{{ alldonecount }}</div>
    <button @click="clearDone">清空已办事项</button>
    <button @click="clearAll">清空全部事项</button>
  </footer>
  <footer class="footer" v-else>暂无待办事项</footer>
</template>

<script setup>
import {computed} from 'vue'
const props=defineProps({
  todos: {
    type: Array,
    required: true,
    default: () => []
  }
})
const emit=defineEmits(['clearDone', 'clearAll','toggleAll'])
const alldone=computed(()=>props.todos.every(todo=>todo.done))
const donecount=computed(()=>props.todos.filter(todo=>todo.done).length)
const alldonecount=computed(()=>props.todos.length)
function toggleAll(e) {
    emit('toggleAll', e.target.checked)
}
function clearDone() {
    emit('clearDone')
}
function clearAll() {
    emit('clearAll')
}
</script>

<style scoped>
footer {
  display: flex;
  margin-top: 20px;
  padding: 10px 40px;
  background-color: #87ceeb;
}
footer div {
  flex: 1;
  margin-left: 20px;
}
footer button {
  margin-left: 10px;
  padding: 0 10px;
  border-radius: 5px;
  border: none;
}
</style>